/**
 * 渲染自定义的html标签
 */
import Vue from 'vue'
import btnSetting from '../setting/niupiBtn.js'

Vue.component('niupi-btn', {
    render: function (createElement) {
        const type = this.type || 'add';
        const size = this.size ? `el-button--${this.size}` : '';
        const disabled = this.disabled !== undefined && this.disabled === false ? '' : 'is-disabled';

        const setting = {
            style: {
                color: '#fff',
                'background-color': btnSetting[type].backgroundColor
            },
            attrs: {
                icon: btnSetting[type].icon
            },
            class: [
                'niupi-btn',
                size,
                disabled
            ],
            on: {
                click: this.$listeners.click || (() => { })
            }
        }
        if (disabled) {
            setting.attrs.disabled = 'disabled';
        }
        return createElement('el-button', setting, this.$slots.default)
    },
    props: {
        // 按钮类型
        type: {
            type: String,
            required: false
        },
        // 按钮大小
        size: {
            type: String,
            required: false
        },
        // 按钮禁用状态
        disabled: {
            type: Boolean,
            required: false
        }
    }
})
